<template>
  <div>
    <el-dialog append-to-body title="还款计划" width="1300px" top="20px" :visible="visible" @close="handleClose">
      <el-form class="key-value white-card" ref="appraiseForm" label-suffix="：">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="欠款金额">{{ workOrderDetails.questionMainInfo?.govArrears.arrearsAmount | unitMoney }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="已支付金额">{{ workOrderDetails.payedAmount | unitMoney }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="已制定支付计划金额">{{ workOrderDetails.makePayPlanAmount | unitMoney }}</el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="支付备注">
          <div v-html="txt2HTML(workOrderDetails.payNote)"></div>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="计划金额已支付">{{ workOrderDetails.payAmountPayed | unitMoney }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划金额未支付">{{ workOrderDetails.payAmountNoPay | unitMoney }}</el-form-item>
          </el-col>
        </el-row>
        <el-table :data="repaymentPlan" size="mini" border stripe class="repayment-plan-table" style="width: 100%; margin-top: 20px">
          <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
          <el-table-column prop="planPayTime" label="计划还款日期" width="260" align="center"></el-table-column>
          <el-table-column prop="amount" label="还款金额（万元）"></el-table-column>
          <el-table-column prop="status" align="center" label="状态">
            <template slot-scope="{ row }">
              {{ row.status | repaymentPlanStatus }}
            </template>
          </el-table-column>
          <el-table-column prop="actualPayTime" label="实际还款日期"></el-table-column>
          <el-table-column prop="operateTime" label="还款操作时间" width="180px"></el-table-column>
          <el-table-column prop="operateUser" label="还款操作人"></el-table-column>
          <el-table-column prop="address" label="操作" v-if="workOrderDetails.status === 5 && hasPermission">
            <template slot-scope="{ row }">
              <el-button :disabled="row.status === 'PAYED'" @click="onAddRepaymentPlan(row.id)" type="primary" plain size="mini" :loading="submitting">添加还款记录</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>

      <div class="split"></div>

      <div class="dialog-footer-btn">
        <el-button @click="handleClose" type="primary" plain>关闭</el-button>
      </div>
    </el-dialog>
    <addRepaymentPlanDialog :visible.sync="addRepaymentPlanDialog.visible" :id="addRepaymentPlanDialog.id" :workOrderId="workOrderDetails.id" @success="onSuccess"></addRepaymentPlanDialog>
  </div>
</template>

<script>
import * as workOrderApi from "@/api/workOrder/index";
import * as mixins from "@/utils/mixins";
import { unitMoney, repaymentPlanStatus, txt2HTML } from "@/utils/filters";
import addRepaymentPlanDialog from "@/views/workOrder/components/addRepaymentPlanDialog.vue";

export default {
  name: "repaymentPlanDialog",
  mixins: [mixins.loading, mixins.form, mixins.dialog],
  filters: { unitMoney, repaymentPlanStatus },
  components: { addRepaymentPlanDialog },
  props: ["visible", "workOrderNo", "type", "workOrderDetails", "repaymentPlan"],
  data() {
    return {
      submitting: false,
      hasPermission: false,
      addRepaymentPlanDialog: {
        visible: false,
        id: undefined,
      },
    };
  },
  computed: {},
  created() {},
  methods: {
    show() {
      workOrderApi.all.checkProcessDepartmentCode({ workOrderId: this.workOrderDetails.id }).then((r) => {
        this.hasPermission = r.result;
      });
    },
    txt2HTML,
    onAddRepaymentPlan(id) {
      this.addRepaymentPlanDialog.visible = true;
      this.addRepaymentPlanDialog.id = id;
    },
    onSuccess() {
      this.$emit("success");
    },
  },
};
</script>

<style lang="less" scoped>
.tips {
  text-align: center;
  margin-bottom: 20px;
}
</style>
